@import url(base.less);
@import url(comment.less);

.detail video{
  .bg-color(#000);
}
.top-header{
  .dl(40);
  .bg-color(#ffd200);
  .tc;
  h1{
    .fz(18);
  }
  .top-share-icon{
    .fullbg('detail_05.png');
    .dba(22,19);
    .mr(10);
    .mt(10);
  }
  .back-icon{
    .fullbg('detail_03.png');
    .dba(10,18);.fl;
    .ml(10);
    .mt(10);
  }
}
.userinfo{
  .plr;
  .user{
    .tx{
      .fl;
      .wh(32px,32px);
      .border-radius(100%);
      .mr10;
    }
    .lh(32);
    .pt(8);
    .fl;
  }
  .atten{
    .fr;
    .fullbg('detail_12.png');
    .dba(67,24);
    .tc;
    .pt(8);
    line-height:24px;
  }
  .had-atten{
    .fullbg('detail_13.png');
  }
}
.articl-top{
  .plr;
  h1{
    .fz(20);
    .lh(24);
    .mt(10);
  }
  .time{
    .lh(24);
    .g9;
  }
  .bdb(#d5d5d5);
}
.articl-cont{
  .g6;
  .lh(24);
  .pb(10);
  .bdb(#d5d5d5);
  .img{
    .db;
    .p10;
    .box-sizing();
  }
  .wz{
    .p10;
    word-break: break-all;
    .fz(16);
  }
}

.three-btn{
  li{
    .box-sizing(); width:33%;padding:0 5px;
    .fl;
    .pr;
  }
  .mt10;
  .pb10;
  .btn{
    .bd(#969696);
    height:40px;line-height:40px;
    .tc;
    .border-radius(20px);
    .db;
    .g6;
    padding:0;
  }
  .shang-btn{
    color:@cred;
    border-color:@cred;
    //.pl(11);
    img{
      margin-bottom:-1px;
    }
    .add-one{
      -webkit-animation-play-state:running;
    }
  }
}
.d-box{
  border-top:10px solid @ce;
  .bdb(@cde);
  .bar{
    border-top:1px solid @cde;
    color:#3c3c3c;
    .p10;
    .bdb(@cde);
  }
  .link-icon{
    .bg-size('detail_32.png',14px,14px,left,center);
    .pl(18);
  }
  .cont{
    .pl(10);.pr(10);.pb(10);
    //.bdb(@ce);
  }
}

.border-btn{
  .bd(#d5d5d5);
  display:inline-block;
  .wh(170px,36px);
  .lh(36);
  .border-radius(18px);
  .g9;
  .pl(10);
}
.bottom-btn{
  .com-icon{.bg-size('detail_56.png',10px,13px,50px,center)}
  .write-icon{.bg-size('detail_59.png',13px,13px,49px,center)}
}
.d-main{
  .bdb(@cde);
}
.goods{
  .mt10;
  .bd(#d5d5d5);
  box-shadow: 0 0 3px #d7d7d7;
  height:89px;
  .bg-color(@cgraybg);
  .pic{
    .fl;
    .mr(10);
    padding:0;
  }
  .comment-icon{
    .fr;
    .mr(5);
    .g9;
    .bg-size('detail_23.png',12px,13px,left,center);
    .pl(14);
    .lh(24);
    .pt(5);
  }
  .on{
    .bg-size('detail_36.png',12px,13px,left,center);
  }
  .cont{
    border:none;
    .pr(10);
    .tit{
      .lh(88);
      .pl(20);
      .bg-size('arrow_right.png',12px,16px,right,center);
    }

  }
  .price{
    color:@cred;
    .mt10;
    .f14;
  }
}
.fix-comment{
  position:fixed;
  left:0;
  bottom:0;
  z-index:2;
  width:100%;
  .bdt(@cde);
  .p10;
  .box-sizing();
  .bg-color(@cwhite);
  -webkit-animation:slideUp .4s ease;
  .cont{
    height:40px;
  }
  .write-input{
    height:38px;
    width:100%;
    .box-sizing();
    .pl(20);
    .bg-color(@ce);
    .bd(@cde);
    .border-radius();
  }
  .input{
    .pr(90);
  }
  .yellow-btn{
    .fr;
    .bg-color(@cyellow);
    .border-radius();
    .f14;
    .g3;
    .wh(80px,40px);
    .lh(40);
    .tc
  }
  .input-desc{
    .pa(15px,23px);
  }
}
.comment-page{
  .bdt(#ad9d9d);
  border:none;
  .pb(50);
  .cont{
    border:none;
  }
}
.pb60{
  .pb(60);
}
.goods-label{
  .pr;
  .mt10;
  z-index:1;
  img{
    .pt(0);
  }
  .cont{
    .wh(100%,128px);
    .pa(0,50%,2);
    .tc;
    .mt(-48);
    h3{
      .fz(20);
      .c(#fff);
      font-weight:normal;
      .plr();
    }
  }
  .label-icon{
    background:url("../../images/label_icons.png") no-repeat;
    background-size:54px auto;
    display:inline-block;
    .wh(54px,54px);
    margin:0 5px;
  }
  .label-foot{
    .c(#fff);
    .plr();
    .pab();
    .w(100%);
    .box-sizing();
    padding-bottom:5px;
    a{
      .c(#fff);
    }
  }
  .had-icon-on{
    background-position:0 -61px;
  }
  .wants-icon{
    background-position:0 -125px;
  }
  .wants-icon-on{
    background-position:0 -189px;
  }
  .label{
    .pa(15px,0,2);
  }
}
.btn{
  display:inline-block;
  .dl(40);
  .plr(20);
}
.btn-radius{
  .border-radius(20px);
  .box-shadow(0 2px 3px #000);
}
.btn-yellow{
  .bg-color(#ffd200);  .f14;
}
.opacity-bg{
  .pa(0,0,1);
  .bg-color(rgba(0,0,0,0.3));
  .wh(100%,100%);
}
.relative-goods{
  .pt(10);
  li{
    .fl;
    .w(33.33%);
    .box-sizing();
    padding:5px;
  }
}
.h70{
  .h(70px);
}
.add-one{
  .fz(20);
  .fb;
  .c(@cred);
  .pa(50%,0);
  .ml(-10);
  opacity:0;
  .lh(20);
  -webkit-animation:addOne 1s ease;
  -webkit-animation-play-state:paused;
}

@-webkit-keyframes addOne{
  0%{-webkit-transform:translate(0,0);opacity:0;}
  1%{-webkit-transform:translate(0,0);opacity:1;}
  100%{-webkit-transform:translate(0,-30px);opacity:0;}
}

.goods-label-2{
  border-top:1px solid #e1e1e1;
  border-bottom:1px solid #e1e1e1;
  padding:10px;
  .pr;
  .left{
    .pa(10,10);
  }
  .right{
    .pl(140);
  }
  .icon{
    display:inline-block;
    .bg-size('label-icon.png',30px,auto,5px);
    .wh(30px,50px);
    padding:0 10px;
    transition:all .5s;
  }
  .had-icon{
    background-position:5px -72px;
  }
  .had-icon-on{
    background-position:5px 3px;
  }
  .wants-icon{
    background-position:5px -204px;
  }
  .wants-icon-on{
    background-position:5px -138px;
  }
  h3{
    .fz(16);
    .c(#000);
    .h(48px);
  }
  .source{
    .tc;
    .mt20;
    span{
      .bdt(#000);
      .c(#e9e9e9);
      .pt(10);
    }
  }
  .price{
    .fz(30);
    .c(#000);
    .tc;
    .mt10;
  }
  .buy-btn{
    .bg-size('label-icon.png',30px,auto,45px,-278px,no-repeat);
    .bg-color(#ffd102);
    .db;
    .mt20;
    .tc;
    .fz(16);
    .dl(50);
    .pl(30);
  }
}
